在 function 的命名上時常犯的錯會以過度簡單的命名，造成無法理解該 function 做的事

• function - 通常以動詞 + 名詞組成

BAD
const fetchData = {
....
}

const totalOfItems ={
....
}

GOOD
const fetchUserData = {
....
}

const calculateTotal = {
....
}

• event function - 通常如果是 event 是 local 的 function, 不是 props 而來, 會使用 handle + 名詞 + 動詞或是 handle + 動詞, 如果是子組件,props 接受 event, 如果有多個 event 會用 on 開頭 + 名詞 + 動詞, 單一 event 則可以用 on + 動詞 (ex: onClick, onHover)

ex: 
function App(){
//父組件
 const handleButtonClick = {
	.....
 }
	<div>
		<Button onClick={handleButtonClick}/>
	</div>
}

function ({onClick}){
//子組件
	<button onClick={onClick}></button>
}

-------------------------------------------------------------------------------

//父組件範例
BAD
const deleteUser = ()=>{
....
}

const submit =()=>{
.....
}

GOOD
const handleUserDelete = ()=>{
....
}

const handleSubmit =()=>{
.....
}

//子組件範例
BAD
const buttonClick = ()=>{
....
}

const submit = ()=>{
....
}

GOOD
const onButtonClick = ()=>{
 .....
}

const onSubmit = ()=>{
....
}

• customer hook - 需要以 use 開頭 + 名詞 or use + 動名詞

BAD
const useWindow = ()=>{
....
}

GOOD
const useWindowWidth = ()=>{
....
}

https://hackernoon.com/the-art-of-naming-variables-52f44de00aad

https://jaketrent.com/post/naming-event-handlers-react

https://reactjs.org/docs/handling-events.html